import React, { useState } from "react";
import { Button, Input, Carousel, Affix, Modal } from "antd";
const contentStyle = {
  margin: 0,
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
import "./index.scss";
import img1 from "../../assets/1.png";
import img2 from "../../assets/2.png";
import img3 from "../../assets/3.png";
import img4 from "../../assets/4.png";
import img5 from "../../assets/5.png";
import img6 from "../../assets/6.png";
import img7 from "../../assets/7.png";
import search from "../../assets/search.png";
import xj from "../../assets/xj.png";
import xin from "../../assets/xin.png";
import xiao from "../../assets/xiao.png";
import jing from "../../assets/jing.png";
import { images } from "../../imageData";
// const { Search } = Input;
function Create() {
  const onChange = (currentSlide) => {
    console.log(currentSlide);
  };
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isImageFocused, setIsImageFocused] = useState(false);

  const handlePrevClick = () => {
    setCurrentIndex(prevIndex => prevIndex === 0 ? images.length - 1 : prevIndex - 1);
  };

  const handleNextClick = () => {
    setCurrentIndex(prevIndex => prevIndex === images.length - 1 ? 0 : prevIndex + 1);
  };

  const handleImageBlur = () => {
    setIsImageFocused(false);
    // 这里可以添加失去焦点时的其他逻辑，比如暂停动画等
  };

  const handleImageFocus = () => {
    setIsImageFocused(true);
  };

  const searchList = () => {
    console.log("搜索")
    setFlag(true)
  }

  const [flag, setFlag] = useState(false)

  return (
    <div>
      <div className="top">
        <div style={{ position: "relative" }}  onFocus={() => searchList()}>
          <Input
            placeholder="&emsp;&emsp;请输入3个以上关键词,搜索更精准"
            style={{ width: "600px", height: "56px" }}
          />
          <Button
            style={{
              width: "94px",
              height: "44px",
              position: "absolute",
              right: "10px",
              top: "5px",
            }}
            type="primary"
            onClick={()=>setFlag(false)}
          >
            <p style={{ fontSize: "20px" }}>搜索</p>

          </Button>
          <img
            src={search}
            alt=""
            style={{
              width: "24px",
              height: "26px",
              position: "absolute",
              left: "10px",
              top: "16px",
            }}
          />
          <img
            src={xj}
            alt=""
            style={{
              width: "30px",
              height: "30px",
              position: "absolute",
              right: "110px",
              top: "14px",
            }}
          />
        </div>

        <div style={{ marginLeft: "100px" }}>
          <Carousel className="carousel" dots={false} arrows infinite={false}>
            <div className="div">
              <dl>
                <dt>
                  <img src={img1} alt="" />
                </dt>
                <dd>
                  <span>小红书</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img2} alt="" />
                </dt>
                <dd>
                  <span>电商</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img3} alt="" />
                </dt>
                <dd>
                  <span>公众号</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img4} alt="" />
                </dt>
                <dd>
                  <span>教育培训</span>
                </dd>
              </dl>
            </div>
            <div className="div">
              <dl>
                <dt>
                  <img src={img5} alt="" />
                </dt>
                <dd>
                  <span>零售</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img6} alt="" />
                </dt>
                <dd>
                  <span>生活日常</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img7} alt="" />
                </dt>
                <dd>
                  <span>行政办公</span>
                </dd>
              </dl>
            </div>
          </Carousel>
        </div>
      </div>
      <div className="searchList" style={{ display: flag ? "block" : "none" }}>
        <div style={{ marginLeft: "100px" }}>
          <Carousel className="carousel" dots={false} arrows infinite={false}>
            <div className="div">
              <dl>
                <dt>
                  <img src={img1} alt="" />
                </dt>
                <dd>
                  <span>小红书</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img2} alt="" />
                </dt>
                <dd>
                  <span>电商</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img3} alt="" />
                </dt>
                <dd>
                  <span>公众号</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img4} alt="" />
                </dt>
                <dd>
                  <span>教育培训</span>
                </dd>
              </dl>
            </div>
            <div className="div">
              <dl>
                <dt>
                  <img src={img5} alt="" />
                </dt>
                <dd>
                  <span>零售</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img6} alt="" />
                </dt>
                <dd>
                  <span>生活日常</span>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src={img7} alt="" />
                </dt>
                <dd>
                  <span>行政办公</span>
                </dd>
              </dl>
            </div>
          </Carousel>
        </div>

      </div>
      {/* <Search placeholder="input search loading with enterButton" enterButton >ss</Search> */}
      <div className="hot">
        <h4 style={{ fontSize: "20px" }}>热门推荐</h4>
        <div style={{ display: "flex" }}>
          <Carousel
            style={{
              width: "600px",
              height: "160px",
              position: "relative",
              marginTop: "-20px",
            }}
            // afterChange={onChange}
            dots={false}
          >
            <img
              src="https://gaoding-market.dancf.com/market-operations/market/side/6d2a6f61c85c4ccf8141003e29bced7e/1732689591234.png?x-oss-process=image/resize,w_600/interlace,1/format,webp"
              alt="精选模版新人专题"
            />
            <img
              src="https://gaoding-market.dancf.com/market-operations/market/side/cff6c641c36a4ab5ab09a08d1720ff2c/1736300982817.png?x-oss-process=image/resize,w_600/interlace,1/format,webp"
              alt="文字列表升级"
            />
            <img
              src="https://gaoding-market.dancf.com/market-operations/market/side/d426bda084f24f09840c9a823139324d/1736160485262.png?x-oss-process=image/resize,w_600/interlace,1/format,webp"
              alt="AI商品背景-新年主题上线"
            />
            <img
              src="https://gaoding-market.dancf.com/market-operations/market/side/c04f84856259470682bb18415c318c2c/1735893638182.png?x-oss-process=image/resize,w_600/interlace,1/format,webp"
              alt="小编精选"
            />

            {/* <div style={{}}>
              <span>精选模版新人专题</span>
              <span>文字列表升级</span>
              <span>AI商品背景-新年主题上线</span>
              <span>小编精选</span>
            </div> */}
          </Carousel>
          <img src={xin} alt="" style={{ width: "150px", height: "200px", marginTop: '-20px', marginLeft: '20px' }} />
          <img src={jing} alt="" style={{ width: "150px", height: "200px", marginTop: '-20px', marginLeft: '20px' }} />
          <img src={xiao} alt="" style={{ width: "150px", height: "200px", marginTop: '-20px', marginLeft: '20px' }} />
        </div>
      </div>
      <div className="create">
        <p>创作工具</p>
      </div>
    </div>
  )
}

export default Create
